<template>
  <div id="gauge-for-two" style="height: 138px; width: 100%"></div>
</template>

<script>
export default {
  name: "GaugeForTwo",
  props: {
    co: {
      type: Number
    },
    ch4: {
      type: Number
    }
  },
  methods: {
    myChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('gauge-for-two'));
      // 监听屏幕变化自动缩放图表
      window.addEventListener('resize', function () {
        myChart.resize()
      })
      // 指定图表的配置项和数据
      let option = {
        grid:{
          left:"0",
          right:"0",
          bottom:"5px"
        },
        series: [{
          type: 'gauge',
          center: ['50%', '64%'],
          radius: '90%',
          startAngle: 180,
          endAngle: 0,
          min: 0,
          max: 1,
          splitNumber: 8,
          axisLine: {
            lineStyle: {
              width: 6,
              color: [
                [0.25, '#7CFFB2'],
                [0.5, '#58D9F9'],
                [0.75, '#FDDD60'],
                [1, '#FF6E76']
              ]
            }
          },
          // 指针
          pointer: {
            show: true,
            icon: 'path://M708.85376 416.19456c0 2.0992-0.65536 4.1984-1.9968 5.96992-2.68288 3.56352-7.424 4.89472-11.5712 3.24608L571.52512 376.5248l0 286.52544c0 5.4784-4.44416 9.92256-9.9328 9.92256l-99.18464 0c-5.46816 0-9.91232-4.44416-9.91232-9.92256L452.49536 376.5248l-123.78112 48.88576c-4.13696 1.6384-8.87808 0.3072-11.56096-3.24608-2.69312-3.56352-2.68288-8.47872 0.06144-12.01152L504.13568 167.0144c1.88416-2.44736 4.78208-3.87072 7.86432-3.87072s5.9904 1.4336 7.86432 3.87072l186.9312 243.13856C708.15744 411.92448 708.85376 414.0544 708.85376 416.19456zM512 726.51776c-46.32576 0-83.88608 37.55008-83.88608 83.88608 0 46.336 37.56032 83.88608 83.88608 83.88608s83.89632-37.55008 83.89632-83.88608C595.89632 764.07808 558.32576 726.51776 512 726.51776z',
            length: '60%',
            width: 8,
            offsetCenter: [0, '0%'],
            itemStyle: {
              color: '#000fd4'
            }
          },
          axisTick: {
            length: 12,
            lineStyle: {
              color: 'auto',
              width: 2
            }
          },
          splitLine: {
            length: 20,
            lineStyle: {
              color: 'auto',
              width: 5
            }
          },
          axisLabel: {
            color: '#ffffff',
            fontSize: 16,
            distance: -60,
            formatter: function (value) {
              if (value === 0.875) {
                return '差';
              } else if (value === 0.625) {
                return '中';
              } else if (value === 0.375) {
                return '良';
              } else if (value === 0.125) {
                return '优';
              }
            }
          },
          title: {
            offsetCenter: [0, '-20%'],
            fontSize: 20,
            color: '#FFF',
          },
          detail: {
            fontSize: 16,
            offsetCenter: [0, '0%'],
            valueAnimation: true,
            formatter: function (value) {
              return Math.round(value * 100);
            },
            color: 'auto'
          },
          data: [
            {
              value: this.co/100,
              name: 'CO',
              color: '#FFF',
              // 文字位置
              title: {
                offsetCenter: ['-65%', '40%']
              },
              detail: {
                offsetCenter: ['-65%', '65%'],
                formatter: function (value) {
                  return Math.round(value * 100) + 'mg/m³';
                },
              }
            },
            {
              value: this.ch4/100,
              name: 'CH4',
              color: '#FFF',
              // 文字位置
              title: {
                offsetCenter: ['65%', '40%']
              },
              detail: {
                offsetCenter: ['65%', '65%'],
                formatter: function (value) {
                  return Math.round(value * 100) + 'mg/m³';
                },
              }
            }
          ]
        }]
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  },
  // mounted是vue中的一个钩子函数，一般在初始化页面完成后，再对dom节点进行相关操作。
  // 实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了
  mounted() {
    this.myChart()
  }
}
</script>

<style scoped>

</style>
